<template>
  <div class="error-page">
    <h3>404</h3>
    <p>It looks like you're lost...</p>
    <img src="//s1.ax1x.com/2020/07/08/UZQfw4.png" alt="404错误" />
    <nuxt-link to="/">{{num}}s后回到首页</nuxt-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: null,
      num: 5
    }
  },
  methods: {
  },
  mounted () {
    this.timer = setInterval(()=>{
      this.num--
      if(this.num < 1) {
        this.$router.push('/')
      }
    },1000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
};
</script>

<style lang="scss">
.error-page {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #7a539e, #3f3267);
  z-index: 9999;
  color: #fff;
  text-align: center;
  h3 {
    line-height: 200px;
    font-size: 96px;
    letter-spacing: 20px;
  }
  img {
    width: 600px;
  }
}
</style>
